<template>
	<view class="content">
		<!-- 导航栏 -->
		<u-navbar :is-back="false" :title="title" :background="background" :title-color="titleColor"></u-navbar>
		<!-- 搜索框 -->
		<view class="search">
			<u-search border-color="#FFCCCC" search-icon-color="#FF6666" placeholder="请输入商品名" v-model="keyword"
				@search="search" :show-action="false"></u-search>
		</view>
		<!-- 资讯模块 -->
		<view class="wrap">
			<u-swiper @click="infoClick" :list="noticeList" height="300rpx" :title="true"></u-swiper>
		</view>
		<!-- 宫格模块 -->
		<view class="grid-container">
			<view>
				<u-grid :col="4" :border="false"  @click="click">
					<u-grid-item v-for="(item,index) in iconList" :index="index" :key="index">
						<u-icon :name="item.name" custom-prefix="custom-icon" size="46"></u-icon>
						<view class="grid-text">{{item.text}}</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<view class="offer" @click="toOffer()">
			<view class="offer-image">
				<u-image width="100%" height="175rpx" src="/static/offer.jpg"></u-image>
			</view>
		</view>
		<!-- 分割线 -->
		<view class="divider">
			<u-divider color="#FF6666" half-width="50" margin-top="10" margin-bottom="20" border-color="#fac6c8"
				bg-color="#f7f7f7">广软二手交易平台</u-divider>
		</view>
		<!-- tabs选项卡 -->
		<view class="tabs-container">
			<view>
				<u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false"
					active-color="#FF6666" swiperWidth="750" bg-color="#f7f7f7"></u-tabs-swiper>
			</view>
			<!-- 内容 -->
			<swiper :current="swiperCurrent" @transition="transition" style="height: 80vh;"
				@animationfinish="animationfinish" @change="swiperChange">
				<swiper-item class="swiper-item" v-for="(item, index) in tabs" :key="index">
					<scroll-view scroll-y style="height: 100%;width: 100%;" :scroll-top="scrollTop" @scrolltolower="onreachBottom" @scroll="scroll">
						<view class="shop-container">
							<view class="min-container" @click="onClick($event,item2.comId)"  v-for="(item2,index2) in shopList" :key="index2" :scroll-top="scrollTop">
								<view class="shop">
									<u-image width="320rpx" height="400rpx" :src="'http://localhost:8088'+item2.imgUrl.split(',')[0]" :lazy-load="true">
										<u-loading slot="loading"></u-loading>
									</u-image>
									<view class="shop-title">{{item2.comName}}</view>
									<view class="shop-money">
										<view class="shop-slod">¥<span>{{item2.soldMoney}}</span></view>
										<view class="shop-orig">¥<span>{{item2.oriMoney}}</span></view>
									</view>
									<view class="shop-divider">
										<u-divider color="#f7f7f7" margin-bottom="20" half-width="250" :use-slot="false"
											border-color="#6d6d6d"></u-divider>
									</view>
									<view class="shop-user">
										<view class="user-avatar">
											<cmd-avatar :src="item2.avatar == '' ? '../../static/profile.jpg' : 'http://localhost:8088' + item2.avatar" :size="35"></cmd-avatar>
										</view>
										<view class="user-info">
											<view>{{item2.nickName}}</view>
											<view>
												<view v-if="item2.method == 0">以钱换物</view>
												<view v-if="item2.method == 1">以物换物</view>
												<view v-if="item2.method == 2">免费送</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						
					</scroll-view>
					<!-- 返回顶部 -->
					<view class="goTop" @tap="goTop" :hidden="!isShow">
					    <view>↑</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import Vue from 'vue'
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				title: "首页",
				titleColor: "#330867",
				background: {
					// 渐变色
					backgroundImage: 'linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%)'
					// backgroundColor:'#f78ca0'
				},
				keyword: "",
				noticeList: [
				],
				iconList:[
					{
						name:'shouji',
						text:'手机'
					},
					{
						name:'meizhuang',
						text:'美妆'
					},
					{
						name:'shuji',
						text:'书籍'
					},
					{
						name:'youxishoubing',
						text:'游戏手柄'
					},
					{
						name:'diannao',
						text:'电脑'
					},
					{
						name:'baobao',
						text:'包包'
					},
					{
						name:'lingshi_dougan',
						text:'零食'
					},
					{
						name:'shuma',
						text:'数码'
					},
				],
				types:[],
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10
				},
				tabsTypes:'',
				pageTotal:0,
				list: [{
					name: '全部'
				}, {
					name: '手机'
				}, {
					name: '电脑'
				}, {
					name: '图书'
				}, {
					name: '化妆品'
				}],
				shopList:[],
				tabs: [{
					value: "1"
				}, {
					value: "2"
				}, {
					value: "3"
				}, {
					value: "4"
				}, {
					value: "5"
				}],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				scrollTop: 0,
				old: {
				    scrollTop: 0
				},
				isShow:false,
				isAll:false
			}
		},
		onLoad() {
			if(!this.getIsLogin){
				uni.redirectTo({
					url:'../login/login'
				})
			}else{
				Vue.prototype.$u.api.getInfo().then(res => {
					this.$store.commit('setUserInfo',res.user)
				})
			}
			Vue.prototype.$u.api.getCommodity({
				pageNum:this.queryParams.pageNum,
				pageSize:this.queryParams.pageSize,
			}).then(res => {
				// console.log(res)
				if(res.total < this.queryParams.pageSize){
					this.isAll = true;
				}
				this.pageTotal = Math.ceil(res.total/this.queryParams.pageSize);
				if(res.code == 200 && res.rows.length > 0){
					this.shopList = res.rows;
				}
			})
			Vue.prototype.$u.api.getTopThreeInformation().then(res => {
				this.noticeList = res
			})
		},
		computed: {
			...mapGetters(['getUserInfo', 'getNeedAuth', 'getIsLogin'])
		},
		methods: {
			// 监听资讯
			infoClick(index){
				// console.log(index)
				uni.navigateTo({
				    url: '/pages/information/details?imtId='+this.noticeList[index].imtId
				});
			},
			onClick(event,comId){
				uni.navigateTo({
				    url: '/pages/detail/detail?comId='+comId
				});
			},
			click(index){
				if(index == 0){
					this.types = [106]
				}else if(index == 1){
					this.types = [105,134,135,136]
				}else if(index == 2){
					this.types = [103,114,115,116]
				}else if(index == 3){
					this.types = [142]
				}else if(index == 4){
					this.types = [110,111,112,113]
				}else if(index == 5){
					this.types = [140]
				}else if(index == 6){
					this.types = [139]
				}else if(index == 7){
					this.types = [107,108,109]
				}
				// console.log(this.types)
				uni.navigateTo({
				    url: '/pages/search/search?types='+this.types
				});
			},
			toOffer() {
				uni.navigateTo({
				    url: '/pages/offer/list'
				});
			},
			search() {
				// console.log(this.keyword)
				uni.navigateTo({
				    url: '/pages/search/search?keyword='+this.keyword
				});
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// 监听swiper的current改变
			swiperChange(e){
				this.queryParams.pageNum = 1;
				this.isAll = false;
				if(e.detail.current == 0){
					this.tabsTypes = ''
				}else if(e.detail.current == 1){
					this.tabsTypes = '106'
				}else if(e.detail.current == 2){
					this.tabsTypes = '110,111,112,113'
				}else if(e.detail.current == 3){
					this.tabsTypes = '103,114,115,116'
				}else if(e.detail.current == 4){
					this.tabsTypes = '105,134,135,136'
				};
				Vue.prototype.$u.api.getCommodity({
					pageNum:this.queryParams.pageNum,
					pageSize:this.queryParams.pageSize,
					types:this.tabsTypes
				}).then(res => {
					if(res.total < this.queryParams.pageSize){
						this.isAll = true;
					}
					this.pageTotal = Math.ceil(res.total/this.queryParams.pageSize);
					if(res.code == 200 && res.rows.length > 0){
						this.shopList = res.rows;
					}else{
						this.shopList = []
					}
				})
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			scroll: function(e) {
				if(e.detail.scrollTop > 1300){
					this.isShow = true;
				}else{
					this.isShow = false;
				}
			    this.old.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				this.scrollTop = this.old.scrollTop
				this.$nextTick(() => {
					this.scrollTop = 0
				});
				uni.showToast({
					icon:"none",
					title:"已返回顶部"
				})
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				if(this.isAll){
					uni.showToast({
						icon:"none",
						title:"已加载全部数据"
					})
				}else{
					this.queryParams.pageNum = ++this.queryParams.pageNum;
					if(this.queryParams.pageNum <= this.pageTotal){
						uni.showToast({
							icon:"loading",
							title:"加载中"
						})
						setTimeout(()=>{
							Vue.prototype.$u.api.getCommodity({
								pageNum:this.queryParams.pageNum,
								pageSize:this.queryParams.pageSize,
								types:this.tabsTypes
							}).then(res => {
								// console.log(res)
								if(res.code == 200 && res.rows.length > 0){
									uni.showToast({
										icon:"success",
										title:"加载成功"
									})
									this.shopList = this.shopList.concat(res.rows)
									this.isAll = false;
								}else{
									this.isAll = true;
								}
							})
						},1000)
					}else{
						this.isAll = true;
					}
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		.search {
			padding: 10rpx 25rpx;
			// background: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%)
			background-color: #fb7e8d;
		}
	}

	.wrap {
		padding: 0 20rpx;
		background: linear-gradient(to bottom, #fb7e8d 0%, #fd868c 19%, #fd868a 60%, #f7f7f7 100%);
		height: 425rpx;
	}

	.grid-container {
		position: relative;
		bottom: 100rpx;
		height: 220rpx;
	}

	.grid-container>view {
		width: 88%;
		margin: 0 auto;
		padding: 10rpx;
		border-radius: 45rpx;
		overflow: hidden;
	}
	
	.offer{
		margin: 20rpx 22rpx;
		overflow: hidden;
		border-radius: 10rpx;
	}

	.badge-icon {
		position: absolute;
		top: 14rpx;
		right: 40rpx;
		width: 30rpx;
		height: 30rpx;
	}

	.grid-text {
		font-size: 28rpx;
		margin-top: 4rpx;
		color: $u-type-info;
	}

	.divider {
		background-color: #FFCCCC;
	}

	.tabs-container {
		height: 750rpx;
	}

	.shop-container {
		display: flex;
		justify-content: center;
		align-content: center; //主轴居中对齐
		align-items: center; //交叉轴的中点对齐
		flex-direction:row; 
		flex-wrap:wrap;
		margin-top: 20rpx;
	}

	.min-container {
		background-color: white;
		margin-left: 20rpx;
		position: relative;
		right: 12rpx;
		border-radius: 10rpx;
		overflow: hidden;
		margin-bottom: 10rpx;
	}

	.shop {
		width: 320rpx;
	}

	.shop-title {
		font-weight: bold;
		font-size: 26rpx;
		margin: 20rpx;
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		word-wrap: break-word;
		white-space: normal !important;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.shop-money {
		display: inline-flex;
	}

	.shop-slod {
		font-size: 26rpx;
		margin: 20rpx 20rpx;
		color: red;
		font-weight: bold;
	}

	.shop-slod>span {
		font-size: 32rpx;
	}

	.shop-orig {
		font-size: 28rpx;
		margin: 24rpx 0;
		color: gray;
		text-decoration: line-through;
	}
	
	.shop-user{
		padding: 0 20rpx 10rpx 20rpx;
		display: inline-flex;
	}
	
	.user-avatar{
		padding: 0 0 10rpx 0;
	}
	
	.user-info{
		margin-left: 10rpx;
	}
	
	.user-info :first-child{
		font-size: 28rpx;
		width: 150rpx;
		overflow:hidden; //超出一行文字自动隐藏 
		text-overflow:ellipsis; //文字隐藏后添加省略号
		white-space:nowrap; //强制不换行
	}
	.user-info :last-child{
		font-size: 20rpx;
		color: #d3d3d3;
	}
	
	.goTop{
		position: fixed;
		bottom: 120rpx;
		right: 60rpx;
	}
	.goTop > view{
		display: block;
		width: 68rpx;
		height: 68rpx;
		text-align: center;
		text-decoration: none;
		font-size: 20px;
		line-height: 68rpx;
		color: #5b5b5b;
		border-radius: 50px;
		background: #FFCCCC;
	}
</style>
